<template>
    <div class="system-add-dept-container">
        <el-dialog title="新增部门" v-model="isShowDialog" width="770px">
            <el-form :model="ruleForm" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="上级部门">
                            <el-cascader 
                            :option="depeData" 
                            :props="{checkStrictly:true,value:'deptName',label:'deptName'}"
                            placeholder="请选择部门"
                            clearable
                            class="w100"
                            v-model="ruleForm.deptLevel"
                            >
                                <template #default="{node,data}">
                                    <span>{{data.deptName}}</span>
                                    <span v-if="!node.isLeaf">({{data.children.length}})</span>
                                </template>
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="部门名称">
                            <el-input v-model="ruleForm.deptName" placeholder="请输入部门名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="负责人">
                            <el-input v-model="ruleForm.person" placeholder="请输入负责人" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                      <el-form-item label="手机号">
                          <el-input v-model="ruleForm.phone" placeholder="请输入手机号码" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="邮箱">
                            <el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="排序">
                            <el-input-number v-model="ruleForm.sort" :min="0" :max="0" controls-position="right" placeholder="请输入排序" class="w100" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="部门状态">
                            <el-switch v-model="ruleForm.status" inline-prompt active-text="开" inactive-text="禁"></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="部门描述">
                            <el-input v-model="ruleForm.describe" text="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button size="default" @lick="onCancel">取消</el-button>
                    <el-button size="default" type="primary" @click="onSubmit"></el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent,reactive,onMounted,toRefs } from 'vue'
// 定义接口来定义对象的类型
interface TableDataRow{
    deptName:string,
    createTime:string,
    status:boolean,
    sort:number,
    describe:string,
    id:number,
    children?:TableDataRow[]
}
interface DeptState{
    isShowDialog:boolean,
    ruleForm:{
        deptLevel:Array<string>,
        deptName:string,
        person:string,
        phone:string |number,
        email:string,
        sort:number,
        status:boolean,
        describe:string,
    },
    deptData:Array<TableDataRow>
}

export default defineComponent({
    name:'systemAddDept',
    setup() {
        const state = reactive<DeptState>({
            isShowDialog:false,
            ruleForm:{
                deptLevel:[],
                deptName:'',
                person:'',
                phone:'',
                email:'',
                sort:0,
                status:true,
                describe:'',
            },
            deptData:[]  
        })
        // 打开弹窗
        const openDialog = ()=>{
            state.isShowDialog = true
        }
        // 关闭弹窗
        const closeDialog = ()=>{
            state.isShowDialog = false
        }
        // 取消
        const onCancel = ()=>{
            closeDialog()
        }
        // 确定
        const onSubmit = ()=>{
            closeDialog()
        }
        // 初始化部门数据
        const initTableData = () => {
			state.deptData.push({
				deptName: 'vueNextAdmin',
				createTime: new Date().toLocaleString(),
				status: true,
				sort: Math.random(),
				describe: '顶级部门',
				id: Math.random(),
				children: [
					{
						deptName: 'IT外包服务',
						createTime: new Date().toLocaleString(),
						status: true,
						sort: Math.random(),
						describe: '总部',
						id: Math.random(),
					},
					{
						deptName: '资本控股',
						createTime: new Date().toLocaleString(),
						status: true,
						sort: Math.random(),
						describe: '分部',
						id: Math.random(),
					},
				],
			});
		};
        return{
           openDialog,
           closeDialog,
           onCancel, 
           onSubmit,
           ...toRefs(state)
        }
        
    },
})
</script>
